<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>jindo.Component - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class=""><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="selected">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


	
<div class="snb depth2 scrollbar">
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<h3 class="blind">jindo.Component 클래스</h3>
			<div class="smanuals">
		
				<h3>보기 옵션</h3>
				<ul class="api-options">
					<li class="api-show-inherited">
						<span id="checkbox-inherited">
							<span class="checkbox-mark checkbox-checked"></span>
							<input type="checkbox" id="api-show-inherited">
						</span><label for="api-show-inherited">상속받은 항목</label>

					</li>
					<li class="api-show-deprecated">
						<span id="checkbox-deprecated">
							<span class="checkbox-mark"></span>
							<input type="checkbox" id="api-show-deprecated">
						</span><label for="api-show-deprecated">폐지예정 항목</label>
					</li>
				</ul>
	
		        
		            <h3><a href="#manual">매뉴얼</a></h3>
		
		            <ul class="manuals">
		                
		                    <li class="manual">
		                        <a href="#manual_853643486c04b40b6e1be0b4bb93a007">jindo.Component 상속하기</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_b6f92b0ebdd3a19453f34fd3c64f7dce">option(), optionSetter() 메서드 사용하기</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_343149baff304c57f870fd681fe6bbd0">커스텀 이벤트 활용</a>
		                    </li>
		                
		                    <li class="manual">
		                        <a href="#manual_fa15db8303afe4d66752f1158d4b0f2d">스태틱 메서드</a>
		                    </li>
		                
		            </ul>
		        

		        
		
		        
		            <h3><a href="#constructor">생성자</a></h3>
		
		            <ul class="constructors">
		                
		                    <li class="">
		                        <a href="#constructor_jindo.Component">
		                            Component
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
				
		        
		            <h3><a href="#property">프로퍼티</a></h3>
		
		            <ul class="properties">
		                
		                    <li class="">
		                        <a href="#property_VERSION" title="사용하는&nbsp;컴포넌트의&nbsp;버전">
		                            VERSION
		                            
		                            <span class="flag static" title="static"><span class="blind">static</span></span>
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
		
		        
		            <h3><a href="#method">메서드</a></h3>
		
		            <ul class="methods">
		                
		                    <li class="">
		                        <a href="#method_attach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;등록한다.">
		                            attach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_detach" title="커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detach()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_detachAll" title="등록된&nbsp;모든&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.">
		                            detachAll()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_factory" title="다수의&nbsp;컴포넌트를&nbsp;일괄&nbsp;생성하는&nbsp;Static&nbsp;Method">
		                            factory()
		                            
		                            <span class="flag static" title="static"><span class="blind">static</span></span>
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_fireEvent" title="이벤트를&nbsp;발생시킨다.">
		                            fireEvent()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class=" deprecated-item">
		                        <a href="#method_getInstance" title="컴포넌트의&nbsp;생성된&nbsp;인스턴스를&nbsp;리턴한다.">
		                            getInstance()
		                            <span class="flag deprecated" title="deprecated"><span class="blind">deprecated</span></span>
		                            <span class="flag static" title="static"><span class="blind">static</span></span>
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_option" title="옵션&nbsp;값을&nbsp;가져온다.">
		                            option()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_option" title="옵션&nbsp;값을&nbsp;설정한다.&nbsp;
htCustomEventHandler&nbsp;옵션을&nbsp;선언해서&nbsp;attach()&nbsp;메서드를&nbsp;사용하지&nbsp;않고&nbsp;커스텀&nbsp;이벤트핸들러를&nbsp;등록할&nbsp;수&nbsp;있다.">
		                            option()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_optionSetter" title="옵션의&nbsp;setter&nbsp;함수를&nbsp;가져온다.&nbsp;
옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.">
		                            optionSetter()
		                            
		                            
		                            
		                            
		                        </a>
		                    </li>
		                
		                    <li class="">
		                        <a href="#method_optionSetter" title="옵션의&nbsp;setter&nbsp;함수를&nbsp;설정한다.&nbsp;
옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.">
		                            optionSetter()
		                            
		                            
		                            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
		                            
		                        </a>
		                    </li>
		                
		            </ul>
		        
		
		        
		
		        
		
		        
	
			</div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>

<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				
<!-- content -->
<div class="content">
	<h1 class="blind">
		Component
	</h1>

	<div class="tc-panel first">
		<dl class="relation">
		<dt>클래스</dt>
		<dd>jindo.Component
		    
	        
			<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l6" title="view source code"><span class="blind">소스코드</span></a></span>
		</dd>

	    

	    
		
	    
		
	    
		
		</dl>

		
		
		<div class="description"><p>진도 컴포넌트를 구현하기 위한 코어 클래스.
다른 컴포넌트가 상속받는 용도로 사용된다.</p></div>
		
		

	    
	    
		<div class="qr_code">
			<strong>QR code</strong>
		
			<div id="QRView">
			<script type="text/javascript">

				document.write([
					'<img src="http://chart.apis.google.com/chart?cht=qr&chs=220x220&chl=',
					encodeURIComponent(location.href.replace(/#.*$/, '')),
					'&choe=UTF-8" />'
				].join(''));

			</script>
			</div>
		</div>	    
	    
		
	</div>

	<div class="tc-panel panel">

        
			<h2 class="noline">생성자</h2>
			
			<table class="tbl_board">
			<caption class="hide">생성자</caption>
			<colgroup>
			<col style="width:22px">
			<col />
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">생성자</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#constructor_jindo.Component" class="name">jindo.Component</a>
( )
 
						<p><p>jindo.Component를 초기화한다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
			</tbody>
			</table>
		

        
			<h2 class="noline">프로퍼티</h2>
			
			<table class="tbl_board">
			<caption class="hide">프로퍼티</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">프로퍼티</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#property_VERSION" class="name">VERSION</a>
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a>
 
<span title="static" class="flag static"><span class="blind">static</span></span>
						<p><p>사용하는 컴포넌트의 버전</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
			</tbody>
			</table>
        

        
			<h2 class="noline">메서드</h2>
			
			<table class="tbl_board">
			<caption class="hide">메서드</caption>
			<colgroup>
			<col style="width:22px">
			<col style="">
			<col style="width:160px">
			</colgroup>
			<thead>
			<tr>
			<th scope="col"></th>
			<th scope="col">메서드</th>
			<th scope="col">정의 주체</th>
			</tr>
			</thead>
			<tbody>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_attach" class="name">attach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>커스텀 이벤트 핸들러를 등록한다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_detach" class="name">detach</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_detachAll" class="name">detachAll</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_factory" class="name">factory</a>
(aObject:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>, htOption:<span class="type">HashTable</span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>
 
<span title="static" class="flag static"><span class="blind">static</span></span>
						<p><p>다수의 컴포넌트를 일괄 생성하는 Static Method</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_fireEvent" class="name">fireEvent</a>
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a>
 
						<p><p>이벤트를 발생시킨다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
					<tr class="deprecated-item ">
					<td class="type">
				        
				        	<span title="deprecated" class="flag deprecate"><span class="blind">deprecated</span></span>
				        
				        
					</td>
					<td>
						<a href="#method_getInstance" class="name">getInstance</a>
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a>
 
<span title="static" class="flag static"><span class="blind">static</span></span>
<span title="deprecated" class="flag deprecated"><span class="blind">deprecated</span></span>
						<p><p>컴포넌트의 생성된 인스턴스를 리턴한다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_option" class="name">option</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a>
 
						<p><p>옵션 값을 가져온다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_option" class="name">option</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, vValue:<span class="type"><a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span><br/><a href="#method_option" class="name">option</a>
(oValue:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>옵션 값을 설정한다. 
htCustomEventHandler 옵션을 선언해서 attach() 메서드를 사용하지 않고 커스텀 이벤트핸들러를 등록할 수 있다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_optionSetter" class="name">optionSetter</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a>
 
						<p><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
					<tr class=" ">
					<td class="type">
				        
				        
					</td>
					<td>
						<a href="#method_optionSetter" class="name">optionSetter</a>
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fSetter:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span><br/><a href="#method_optionSetter" class="name">optionSetter</a>
(oValue:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a>
 
<span title="chainable" class="flag chainable"><span class="blind">chainable</span></span>
						<p><p>옵션의 setter 함수를 설정한다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></p>
					</td>
					<td>jindo.Component</td>
					</tr>
	            
			</tbody>
			</table>
        

        			
	</div>

    
        <div class="tc-panel">
			<h2 id="manual">매뉴얼</h2>
            
				<div id="manual_853643486c04b40b6e1be0b4bb93a007" class="manual item">
				    <h3>jindo.Component 상속하기</h3>
				    <div class="description"><p>진도 컴포넌트 구현시 jindo.Component 클래스를 상속하여 옵션, 커스텀이벤트 핸들링 기능등의 공통기능들을 편리하게 사용할 수 있다. 아래의 코드는 jindo.Component 를 상속한 jindo.NewComponent를 정의하고 초기화하는 예제이다.</p>

<pre class="code"><code class="prettyprint">//include jindo.Component.js

//NewComponent 정의
jindo.NewComponent = jindo.$Class({}).extend(jindo.Component);

//jindo.NewComponent 초기화 및 인스턴스 생성
var oInstance = new jindo.NewComponent();
</code></pre>

<p>이제 oInstance는 jindo.Component에서 정의된 option, optionSetter, fireEvent, attach, detach, detachAll과 같은 인스턴스 메소드와 getInstance, factory와 같은 스태틱 메소드를 사용할 수 있다.</p>

<h4>Note</h4>

<ul>
<li>진도 컴포넌트 구현시 반드시 jindo.Component를 상속받을 필요는 없다.</li>
</ul></div>
				</div>
            
				<div id="manual_b6f92b0ebdd3a19453f34fd3c64f7dce" class="manual item">
				    <h3>option(), optionSetter() 메서드 사용하기</h3>
				    <div class="description"><h4>option()</h4>

<p>option() 메소드는 컴포넌트를 초기화하기 위해 사용되는 다양한 옵션값들을 지정하고 반환하기위해 사용한다. option() 메소드는 컴포넌트 내부에서 사용되는 어떠한 상수값 또는 사용자의 입력값에 따라 다르게 동작하는 컴포넌트를 구현할 때 다음과 같은 방법으로 자주 사용된다.</p>

<pre class="code"><code class="prettyprint">jindo.NewComponent = jindo.$Class({
    $init : function(htOption){
        //디폴트 옵션 정의
        this.option({
            nDefaultValue : 100
        });
        //사용자가 입력한 옵션 HashTable(htOption)이 있는 경우 옵션값을 변경
        this.option(htOption || {});
    },
    getDefaultValue : function(){
        return this.option("nDefaultValue");
    }
}).extend(jindo.Component);
</code></pre>

<p>위 예제에서는 디폴트 옵션값으로 nDefaultValue를 100으로 지정하고 getDefaultValue() 메소드를 정의하여 지정된 nDefaultValue 옵션값을 리턴하도록 하였다. 그리고 컴포넌트 초기화시에 htOption을 인자로 받아 사용자가 입력한 옵션 HashTable이 있는 경우 옵션값을 변경하도록 선언하였다. jindo.NewComponent를 다음과 같이 초기화하는 경우 getDefaultValue() 메소드는 내부에서 디폴트 옵션으로 지정한 100을 리턴한다.</p>

<pre class="code"><code class="prettyprint">var oInstance = new jindo.NewComponent();
oInstance.getDefaultValue(); //100
</code></pre>

<p>다음과 같이 초기화하는 경우 getDefaultValue() 메소드는 사용자가 지정한 200을 리턴하게된다.
    var oInstance = new jindo.NewComponent({
        nDefaultValue : 200
    });
    oInstance.getDefaultValue(); //200</p>

<h4>optionSetter()</h4>

<p>옵션 값은 컴포넌트 초기화시에 지정하게 하는 것이 일반적이지만 경우에 따라 초기화 이후에 변경할수 있도록 설계할 수도 있다. 초기화 이후의 옵션 값의 변경이 다른 로직에 영향을 주는 경우가 있을 수 있는데, 이 경우 optionSetter() 메소드를 사용하여 적절한 동작을 수행시킬 수 있다. 예를 들어 지정한 nInterval 옵션값에 따라 특정 동작을 반복하여 수행하도록 초기화하는 컴포넌트가 있다고 가정해보자. 특정 동작의 반복은 setInterval() 함수로 구현하였다.</p>

<pre class="code"><code class="prettyprint">jindo.Loop = jindo.$Class({
    $init : function(htOption){
        //디폴트 옵션 정의
        this.option({
            nInterval : 1000
        });
        this.option(htOption || {});
        this._loop();
    },
    _action : function() {
        //반복동작
    },
    _loop : function() {
        this._nTimer = setInterval(this._action, this.option("nInterval"));
    }
}).extend(jindo.Component);
var oInstance = new jindo.Loop();

oInstance.option("nInterval", "2000"); //옵션값을 바꾸어도 반복동작에는 아무런 변화 없음.
</code></pre>

<p>초기화된 Loop 컴포넌트는 매 1000ms 마다 반복동작을 수행하게 되는데 nInterval 옵션값을 바꾸더라도 동작은 변하지 않는다. 초기화된 Loop 컴포넌트의 nInterval 옵션값의 변경에 따라 반복동작이 변하도록 구현하려면 다음과 같이 optionSetter() 메소드를 사용하면 된다.</p>

<pre class="code"><code class="prettyprint">jindo.Loop = jindo.$Class({
    $init : function(htOption){
        //디폴트 옵션 정의
        this.option({
            nInterval : 1000,
        });
        //nInterval옵션에 대한 optionSetter 정의
        this.optionSetter("nInterval", function(){
            clearInterval(this._nTimer);
            this._loop();
        });
        this.option(htOption || {});
        this._loop();
    },
    _action : function() {
        //반복동작
    },
    _loop : function() {
        this._nTimer = setInterval(this._action, this.option("nInterval"));
    }
}).extend(jindo.Component);
var oInstance = new jindo.Loop();
oInstance.option("nInterval", "2000"); //옵션값을 바꾸면 반복동작의 시간간격이 변함.
</code></pre></div>
				</div>
            
				<div id="manual_343149baff304c57f870fd681fe6bbd0" class="manual item">
				    <h3>커스텀 이벤트 활용</h3>
				    <div class="description"><p>컴포넌트의 특정동작시점에 원하는 동작을 수행시킬 수 있도록 jindo.Component는 커스텀 이벤트를 발생시키고 해당 이벤트에 이벤트 핸들러를 등록하고 해제하는 기능을 제공한다. 진도의 jindo.$Fn이 제공하는 attach()와 detach() 메소드로 DOMEvent에 원하는 이벤트핸들러를 등록/해제하는 것과 유사하게 진도 컴포넌트의 커스텀이벤트를 핸들링할 수 있다.</p>

<h4>fireEvent()</h4>

<p>fireEvent() 메소드는 커스텀 이벤트를 발생시킨다. 이벤트명 명명규칙은 첫글자가 소문자인 CamelCase 즉 lowerCamelCase 방식을 사용한다. 다음은 "before" 커스텀 이벤트를 발생시키는 예이다.</p>

<pre class="code"><code class="prettyprint">jindo.NewComponent = jindo.$Class({
    $init : function(){
    shout : function(sMsg) {
        this.fireEvent("before");
        alert(sMsg);
    }
}).extend(jindo.Component);
var oInstance = new jindo.NewComponent();
</code></pre>

<h4>attach()</h4>

<p>attach() 메소드는 커스텀이벤트가 발생되면 수행될 핸들러를 등록하는 메소드이다. 위의 예제에 이어 "before" 커스텀이벤트 발생시 alert("before");를 수행하는 핸들러를 등록하는 방법은 다음과 같다.</p>

<pre class="code"><code class="prettyprint">oInstance.attach("before", function(oCustomEvent){
    //this -&gt; oInstance (커스텀이벤트 핸들러내의 this는 컴포넌트의 인스턴스 자신이다)
    alert("before");
});

oInstance.shout("wow!"); -&gt; alert "before", alert "wow!" 수행
</code></pre>

<p>하나의 커스텀이벤트에 여러개의 핸들러를 등록하는 것이 가능하고 등록된 핸들러는 등록된 순서대로 수행된다.</p>

<h4>커스텀이벤트 객체</h4>

<p>커스텀이벤트 핸들러내에 전달되는 객체 oCustomEvent에는 커스텀이벤트 명을 나타내는 sType 프로퍼티와 더이상의 이벤트 발생과 동작을 중단시키기 위한 stop() 메소드가 포함된다. 원하는 경우 HashTable을 fireEvent() 메소드의 두번째 인자로 지정해 추가할 수 있다.</p>

<pre class="code"><code class="prettyprint">jindo.NewComponent = jindo.$Class({
    $init : function(){
    shout : function(sMsg) {
        this.fireEvent("before", { //커스텀이벤트 객체에 원하는 프로퍼티를 추가
            sName : "test"
        });
        alert(sMsg);
    }
}).extend(jindo.Component);
var oInstance = new jindo.NewComponent();
oInstance.attach("before", function(oCustomEvent){
    alert(oCustomEvent.sType); //oCustomEvent.sType -&gt; "before"
    alert(oCustomEvent.sName); //oCustomEvent.sName -&gt; "test"
});

oInstance.shout("wow!"); -&gt; alert "before", alert "test", alert "wow!" 수행
</code></pre>

<p>fireEvent()의 리턴값은 커스텀이벤트 핸들러내에서 stop() 메소드의 실행여부에 따라 달라진다. stop() 메소드가 수행되면 해당 이벤트에 등록된 실행되지 않은 이벤트핸들러가 있더라도 발생되지 않으며, fireEvent() 리턴 값이 false가 된다. 이를 이용해 before 커스텀이벤트에서 stop() 메소드가 수행되면 기본동작을 중지하도록 소스코드를 수정해보자.</p>

<pre class="code"><code class="prettyprint">jindo.NewComponent = jindo.$Class({
    $init : function(){
    shout : function(sMsg) {
        if (this.fireEvent("before")) {
            alert(sMsg);
        }
    }
}).extend(jindo.Component);

var oInstance = new jindo.NewComponent();

oInstance.attach("before", function(oCustomEvent){
    oCustomEvent.stop(); //shout() 내에서 정의된 this.fireEvent("before")의 리턴값이 false가 됨
});

oInstance.shout("test"); -&gt; 아무런 동작 없음
</code></pre>

<h4>detach() / detachAll()</h4>

<p>detach() 메소드는 등록된 커스텀 이벤트를 해제시킨다. 일반적인 사용방법은 다음과 같다.</p>

<pre class="code"><code class="prettyprint">var fBeforeCustomEventHandler = function(oCustomEvent){
    oCustomEvent.stop(); //shout() 내에서 정의된 this.fireEvent("before")의 리턴값이 false가 됨
};
oInstance.attach("before", fBeforeCustomEventHandler); //fBeforeCustomEventHandler를 핸들러로 등록
oInstance.detach("before", fBeforeCustomEventHandler); //fBeforeCustomEventHandler를 핸들러로 해제
</code></pre>

<p>커스텀이벤트 핸들러를 1회만 수행시키고 해제하려는 경우 다음과 같이 사용가능하다.</p>

<pre class="code"><code class="prettyprint">oInstance.attach("before", function(oCustomEvent){
    this.detach(oCustomEvent.sType, arguments.callee); //커스텀이벤트 핸들러가 수행되자마자 곧바로 해제
});
</code></pre>

<p>여러개의 커스텀이벤트 핸들러를 동시에 해제하기 위해서 detachAll()을 사용가능하다.</p>

<pre class="code"><code class="prettyprint">oInstance.attach("before", fA);
oInstance.attach("before", fB);
oInstance.attach("before", fC);
oInstance.detachAll("before"); //"before" 커스텀이벤트 핸들러 모두 해제

oInstance.attach("before", fA);
oInstance.attach("before", fB);
oInstance.attach("after", fC);
oInstance.detachAll(); //모든 커스텀이벤트 핸들러 해제
</code></pre></div>
				</div>
            
				<div id="manual_fa15db8303afe4d66752f1158d4b0f2d" class="manual item">
				    <h3>스태틱 메서드</h3>
				    <div class="description"><h4>factory()</h4>

<p>진도 컴포넌트의 생성자는 일반적으로 엘리먼트, 옵션객체를 인자로 받는다.</p>

<pre class="code"><code class="prettyprint">var oCheckBox = new jindo.CheckBox(jindo.$("cb"), { sClassName : "checkbox-" });
</code></pre>

<p>여러개의 엘리먼트에 동일한 옵션으로 컴포넌트를 초기화할때 다음과 같이 factory 스태틱메소드를 사용할 수 있다.</p>

<pre class="code"><code class="prettyprint">//각각 인스턴스 생성
var oCheckBox1 = new jindo.CheckBox(jindo.$("cb1"), { sClassName : "checkbox-" });
var oCheckBox2 = new jindo.CheckBox(jindo.$("cb2"), { sClassName : "checkbox-" });
var oCheckBox3 = new jindo.CheckBox(jindo.$("cb3"), { sClassName : "checkbox-" });

//factory 스태틱 메소드로 일괄생성 (위와 동일)
var aCheckBox = jindo.CheckBox.factory([jindo.$("cb1"), jindo.$("cb2"), jindo.$("cb3")], { sClassName : "checkbox-" });
</code></pre>

<h4>getInstance()</h4>

<p>getInstance() 스태틱메소드는 해당 컴포넌트의 모든 인스턴스를 배열로 리턴한다.</p>

<pre class="code"><code class="prettyprint">new jindo.CheckBox(jindo.$("cb1"));
new jindo.CheckBox(jindo.$("cb2"));
new jindo.CheckBox(jindo.$("cb3"));

//getInstance()로 인스턴스배열 구하기
var aCheckBox = jindo.CheckBox.getInstance(); //[인스턴스1, 인스턴스2, 인스턴스3]
</code></pre></div>
				</div>
            
        </div>
    

	
		<div class="tc-panel">
			<h2 id="constructor">생성자 세부 정보</h2>
	        
	            <div id="constructor_jindo.Component" class="constructor item">
	<h3>jindo.Component()
		<span>생성자</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l20" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>new jindo.Component
( )</code></div>
	<div class="description"><p>jindo.Component를 초기화한다.</p></div>

	
	
    
	
    
        	
    
    
    
    
    

    

</div>

<!--
	
-->
	        
	    </div>
    

	
		<div class="tc-panel">
			<h2 id="property">프로퍼티 세부 정보</h2>
	        
	            <div id="property_VERSION" class="property item">
	<h3>VERSION
		<span>프로퍼티</span>
        
        
        <!--
        
        -->
        
            <span class="flag static" title="static"><span class="blind">static</span></span>
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l420" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
    
	<div class="description"><p>사용하는 컴포넌트의 버전</p></div>

	<div class="type">
        <h4>타입</h4>
        <p><span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span></p>
    </div>
	
    
    	<div class="default">
	        <h4>기본값</h4>
	        <p>&quot;1.3.0&quot;</p><!-- @TODO -->
        </div>
    
	
	
	
    
	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">console.log(jindo.Component.VERSION); // "1.3.0"
</code></pre>
            </div>
        </div>
    
    
    
    
    
        <div class="since">
            <h4>
                지원 버젼
            </h4>
            
            <div class="example-content">
            	1.3.0 이상
            </div>
        </div>
    
    
    

</div>

	        
	    </div>
    
	
	
		<div class="tc-panel">
			<h2 id="method">메서드 세부 정보</h2>
	        
	            
<div id="method_attach" class="method item">
	<h3>attach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l253" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>attach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToAttach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 등록한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param collapsed last">
    
        <button type="submit" class="fold">자세히 보기</button>
    
    
        <code class="name">fHandlerToAttach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 할 커스텀 이벤트 핸들러</p>

	
	
    
        <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">oCustomEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 객체</p>

	
	
    
</li>

        </ul>
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 등록 방법 예제
//아래처럼 등록하면 appear 라는 사용자 이벤트 핸들러는 총 3개가 등록되어 해당 이벤트를 발생시키면 각각의 핸들러 함수가 모두 실행됨.
//attach 을 통해 등록할때는 이벤트명에 'on' 이 빠지는 것에 유의.
function fpHandler1(oEvent) { .... };
function fpHandler2(oEvent) { .... };

var oInst = new MyComponent();
oInst.onappear = fpHandler1; // 직접 등록
oInst.attach('appear', fpHandler1); // attach 함수를 통해 등록
oInst.attach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detach" class="method item">
	<h3>detach()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l297" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detach
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fHandlerToDetach:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></code></div>
	<div class="description"><p>커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트 명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">fHandlerToDetach</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">등록 해제 할 커스텀 이벤트 핸들러</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//이벤트 해제 예제
oInst.onappear = null; // 직접 해제
oInst.detach('appear', fpHandler1); // detach 함수를 통해 해제
oInst.detach({
    appear : fpHandler1,
    more : fpHandler2
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_detachAll" class="method item">
	<h3>detachAll()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l335" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>detachAll
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></code></div>
	<div class="description"><p>등록된 모든 커스텀 이벤트 핸들러를 해제한다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">이벤트명. 생략시 모든 등록된 커스텀 이벤트 핸들러를 해제한다.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></span>
	<p class="description">컴포넌트 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//"show" 커스텀 이벤트 핸들러 모두 해제
oInst.detachAll("show");

//모든 커스텀 이벤트 핸들러 해제
oInst.detachAll();
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_factory" class="method item">
	<h3>factory()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
            <span class="flag static" title="static"><span class="blind">static</span></span>
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l369" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>factory
(aObject:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>, htOption:<span class="type">HashTable</span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></code></div>
	<div class="description"><p>다수의 컴포넌트를 일괄 생성하는 Static Method</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">aObject</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
    

    

    <p class="description">기준엘리먼트의 배열</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">htOption</code>
        <span class="type">: HashTable</span>
    

    

    <p class="description">옵션객체의 배열</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
	<p class="description">생성된 컴포넌트 객체 배열</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">var Instance = jindo.Component.factory(
    cssquery('li'),
    {
        foo : 123,
        bar : 456
    }
);
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_fireEvent" class="method item">
	<h3>fireEvent()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l180" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>fireEvent
(sEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, oEvent:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></code></div>
	<div class="description"><p>이벤트를 발생시킨다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">커스텀 이벤트명</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">oEvent</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">커스텀 이벤트 핸들러에 전달되는 객체.</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
	<p class="description">핸들러의 커스텀 이벤트객체에서 stop메서드가 수행되면 false를 리턴</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">//커스텀 이벤트를 발생시키는 예제
var MyComponent = jindo.$Class({
    method : function() {
        this.fireEvent('happened', {
            sHello : 'world',
            nAbc : 123
        });
    }
}).extend(jindo.Component);

var oInst = new MyComponent().attach({
    happened : function(oCustomEvent) {
        alert(oCustomEvent.sHello + '/' + oCustomEvent.nAbc); // 결과 : world/123
    }
});

&lt;button onclick="oInst.method();"&gt;Click me&lt;/button&gt; 
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_getInstance" class="method item deprecated-item">
	<h3>getInstance()
		<span>메서드</span>
        
            <span class="flag deprecated" title="deprecated"><span class="blind">deprecated</span></span>
        
        
        <!--
        
        -->
        
            <span class="flag static" title="static"><span class="blind">static</span></span>
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l402" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>getInstance
( )
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></code></div>
	<div class="description"><p>컴포넌트의 생성된 인스턴스를 리턴한다.</p></div>

	
	<div class="remark">
		<h4>중요</h4>
	    
            <div class="example-content">본 메서드는 deprecated 되었으며 멀지 않은 릴리즈부터 사라질 예정입니다.</div>
	    
	</div>
	
	
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array" class="crosslink external" target="_blank">Array</a></span>
	<p class="description">생성된 인스턴스의 배열</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_option" class="method item">
	<h3>option()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l33" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>option
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></code></div>
	<div class="description"><p>옵션 값을 가져온다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">옵션의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>
	<p class="description">옵션의 값</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_option" class="method item">
	<h3>option()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l40" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>option
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, vValue:<span class="type"><a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a><br/>option
(oValue:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></code></div>
	<div class="description"><p>옵션 값을 설정한다. 
htCustomEventHandler 옵션을 선언해서 attach() 메서드를 사용하지 않고 커스텀 이벤트핸들러를 등록할 수 있다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">옵션의 이름</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">vValue</code>
        <span class="type">: <a href="#" onclick="return false;" title="어떤 타입이라도 될 수 있습니다.">Variant</a></span>
    

    

    <p class="description">옵션의 값</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">oValue</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">하나 이상의 이름과 값을 가지는 옵션 객체</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></span>
	<p class="description">옵션 값을 설정한 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">var MyComponent = jindo.$Class({
    method : function() {
        alert(this.option("foo"));
    }
}).extend(jindo.Component);

var oInst = new MyComponent();
oInst.option("foo", 123); // 또는 oInst.option({ foo : 123 });
oInst.method(); // 결과 123
</code></pre><pre class="code"><code class="prettyprint">//커스텀 이벤트핸들러 등록예제
oInst.option("htCustomEventHandler", {
    test : function(oCustomEvent) {

    }
});

//이미 "htCustomEventHandler" 옵션이 설정되어있는 경우에는 무시된다.
oInst.option("htCustomEventHandler", {
    change : function(oCustomEvent) {

    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_optionSetter" class="method item">
	<h3>optionSetter()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l126" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>optionSetter
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>)
:<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></code></div>
	<div class="description"><p>옵션의 setter 함수를 가져온다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  last">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">setter의 이름</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
	<p class="description">setter 함수</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
    
    
    
    
    
    

</div>

	        
	            
<div id="method_optionSetter" class="method item">
	<h3>optionSetter()
		<span>메서드</span>
        
        
        <!--
        
        -->
        
        
        
            <span class="flag chainable" title="chainable"><span class="blind">chainable</span></span>
        
		
		<span class="btn_code"><a href="../files/source_jindo.Component.js.html#l134" title="view source code"><span class="blind">소스코드</span></a></span>
    </h3>
	<div class="syntax"><code>optionSetter
(sName:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>, fSetter:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a><br/>optionSetter
(oValue:<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>)
:<a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></code></div>
	<div class="description"><p>옵션의 setter 함수를 설정한다. 
옵션의 setter 함수는 지정된 옵션이 변경되면 수행되는 함수이다.</p></div>

	
	
    
        <div class="params">
			<h4>매개 변수</h4>

            <ul class="params-list">
            
<li class="param  ">
    
    
        <code class="name">sName</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
    

    

    <p class="description">setter의 이름</p>

	
	
    
</li>

<li class="param  ">
    
    
        <code class="name">fSetter</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
    

    

    <p class="description">setter 함수</p>

	
	
    
</li>

<li class="param  last">
    
    
        <code class="name">oValue</code>
        <span class="type">: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
    

    

    <p class="description">하나 이상의 setter 이름과 setter 함수를 가지는 객체</p>

	
	
    
</li>

            </ul>
        </div>
    
	
    
        <div class="params">
			<h4>반환값</h4>
            <ul class="params-list">
            
<li class="param  last">
    
	<span class="type"><a href="..\classes\jindo.Component.html" class="crosslink">jindo.Component</a></span>
	<p class="description">옵션의 setter 함수를 설정한 인스턴스 자신</p>
	
</li>

            </ul>
        </div>
    
    	
    
        	
    
        <div class="example">
            <h4>예제</h4>

            <div class="example-content">
                <pre class="code"><code class="prettyprint">oInst.option("sMsg", "test");
oInst.optionSetter("sMsg", function(){
    alert("sMsg 옵션 값이 변경되었습니다.");
});
oInst.option("sMsg", "change"); -&gt; alert발생
</code></pre><pre class="code"><code class="prettyprint">//HashTable 형태로 설정가능
oInst.optionSetter({
    "sMsg" : function(){
    },
    "nNum" : function(){
    }
});
</code></pre>
            </div>
        </div>
    
    
    
    
    
    
    

</div>

	        
	    </div>
    
	
	

    
	    
	
	
	<div class="btn_top" id="btn_top">
		<a title="맨위로" href="#"><span class="blind">맨위로</span></a>
	</div>	

</div>
<!-- // content -->

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>